<template>
  <div class="main">
    <div class="device">
      <div @click="deviceData.show = true" class="dleft">
        <span style="font-weight: 500">有害气体检测</span>
      </div>
      <div @click="deviceData.show = true" class="dmid">
        <span
          ><img
            align="absmiddle"
            style="width: 5vw"
            src="@svg/id.svg"
          />&nbsp;ID: {{ deviceData.ID }}</span
        >
        <span
          ><img
            align="absmiddle"
            style="width: 5vw"
            src="@svg/humi.svg"
          />&nbsp;有害气体: {{ deviceData.AO }}%</span
        >
        <span
          ><img
            align="absmiddle"
            style="width: 5vw"
            src="@svg/mode.svg"
          />&nbsp;模式: {{ deviceData.mode === true ? "自动" : "手动" }}</span
        >
        <span
          ><img
            align="absmiddle"
            style="width: 5vw"
            src="@svg/set.svg"
          />&nbsp;阈值: {{ deviceData.setA }}%</span
        >
      </div>
      <div class="dright">
        <van-switch
          v-model="deviceData.gpioState"
          size="24px"
          :disabled="deviceData.mode === true ? true : false"
          :loading="deviceData.gload"
          @change="onGPIOChange(deviceData)"
        />
      </div>
      <van-action-sheet
        style="height: 80v; text-align: left"
        v-model="deviceData.show"
        title="节点设置"
      >
        <div class="content">
          <van-cell-group>
            <van-cell title="节点ID" size="large" :value="deviceData.ID" />
            <van-cell
              title="当前有害气体含量"
              size="large"
              :value="deviceData.AO + '%'"
            />
            <van-cell
              center
              size="large"
              :label="deviceData.mode === true ? '自动' : '手动'"
              title="模式选择"
            >
              <template #right-icon>
                <van-switch
                  v-model="deviceData.mode"
                  size="24"
                  @change="onModeChange(deviceData)"
                  :loading="deviceData.mload"
                />
              </template>
            </van-cell>
            <van-cell
              center
              size="large"
              :label="deviceData.gpioState === true ? '报警' : '正常'"
              title="报警状态"
            >
              <template #right-icon>
                <van-switch
                  v-model="deviceData.gpioState"
                  :loading="deviceData.gload"
                  @change="onGPIOChange(deviceData)"
                  :disabled="deviceData.mode === true ? true : false"
                  size="24"
                />
              </template>
            </van-cell>
            <van-divider>有害气体浓度阈值</van-divider>
            <van-slider
              v-model="deviceData.setA"
              @change="onAChange(deviceData)"
              :disabled="deviceData.sload"
              active-color="#0aadee"
            >
              <template #button>
                <div class="custom-button">{{ deviceData.setA }}</div>
              </template>
            </van-slider>
            <p style="font-size: 3vw; text-align: center; margin-top: 20px">
              说明：当有害气体浓度大于设定阈值时，设备将会发出警报。
            </p>
          </van-cell-group>
        </div>
      </van-action-sheet>
    </div>
  </div>
</template>

<script>
import mqtt from "mqtt";
//import { Dialog } from 'vant';
import { Toast } from "vant";
var client;
const options = {
  connectTimeout: 40000,
  clean: true,
};
client = mqtt.connect("ws://121.5.58.100:8083/mqtt", options);
export default {
  name: "Device",
  props: {
    id: String,
  },
  components: {},
  created: function () {
    this.mqttMsg();
  },
  data() {
    return {
      gpioc: "",
      modec: "",
      setAc: "",
      isLoad: false,
      checked: false,
      show: true,
      value: 0,
      send: "",
      param: "",
      flag: true,
      num: "",
      deviceData: {
        ID: this.id,
        AO: "--",
        DO: "--",
        mode: null,
        gpioState: null,
        show: false,
        gload: false,
        mload: false,
        sload: false,
        setA: 0,
      },
    };
  },
  methods: {
    onGPIOChange(detail) {
      this.deviceData.gload = true;
      this.param =
        '{"ID":' +
        this.deviceData.ID +
        ',"gpioState":' +
        (detail.gpioState === true ? 1 : 0) +
        ',"setA": -1,"modeFlag": -1}';
      console.log(this.param);
      client.publish("wsn/control", this.param);
      this.gpioc = setInterval(() => {
        client.publish("wsn/control", this.param);
      }, 2500);
    },
    onModeChange(detail) {
      this.deviceData.mload = true;
      this.param =
        '{"ID":' +
        this.deviceData.ID +
        ',"modeFlag":' +
        (detail.mode === true ? 1 : 0) +
        ',"setA":-1,"gpioState":-1}';
      console.log(this.param);
      client.publish("wsn/control", this.param);
      this.modec = setInterval(() => {
        client.publish("wsn/control", this.param);
      }, 2500);
    },
    onAChange(detail) {
      this.deviceData.sload = true;
      this.param =
        '{"ID":' +
        this.deviceData.ID +
        ',"setA":' +
        detail.setA +
        ',"modeFlag":-1,"gpioState":-1}';
      console.log(this.param);
      client.publish("wsn/control", this.param);
      this.setAc = setInterval(() => {
        client.publish("wsn/control", this.param);
      }, 2500);
    },
    mqttMsg() {
      client.on("connect", () => {
        console.log("连接成功！！！");
        client.subscribe("wsn/info", { qos: 0 }, (error) => {
          if (!error) {
            console.log("订阅成功");
          } else {
            console.log("订阅失败");
          }
        });
      });
      // 接收消息处理
      client.on("message", (topic, message) => {
        console.log(message.toString()); //控制台显示接收到的数据
        this.data = message.toString();
        this.res = JSON.parse(message.toString());
        if (this.res.Type === "A-D-GPIO-MQ") {
          this.deviceData.ID = this.res.ID;
          this.deviceData.AO = this.res.A.toFixed();
          this.deviceData.DO = this.res.D;
          if (this.deviceData.sload) {
            if (this.deviceData.setA === this.res.setA) {
              this.deviceData.sload = false;
              clearInterval(this.setAc);
              Toast.success("阈值设定成功");
            } else {
              console.log(this.param);
              client.publish("wsn/control", this.param);
            }
          } else {
            this.deviceData.setA = this.res.setA;
          }
          if (this.deviceData.mload) {
            if (
              this.deviceData.mode === (this.res.modeFlag === 1 ? true : false)
            ) {
              this.deviceData.mload = false;
              clearInterval(this.modec);
              Toast.success("模式设定成功");
            } else {
              console.log(this.param);
              client.publish("wsn/control", this.param);
            }
          } else {
            this.deviceData.mode = this.res.modeFlag === 1 ? true : false;
          }
          if (this.deviceData.gload) {
            if (
              this.deviceData.gpioState ===
              (this.res.gpioState === 1 ? true : false)
            ) {
              this.deviceData.gload = false;
              clearInterval(this.gpioc);
              Toast.success("报警设置成功");
            } else {
              console.log(this.param);
            }
          } else {
            this.deviceData.gpioState = this.res.gpioState === 1 ? true : false;
          }
        }
      });
    },
  },
};
</script>
<style scoped>
.content {
  padding: 10px 16px;
}
.main {
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.device {
  width: 85vw;
  height: 28vw;
  display: flex;
  justify-content: left;
  align-items: center;
  border-radius: 20px;
  margin: auto;
  margin-bottom: 20px;
  text-align: left;
  padding: 10px 10px;
  background-color: white;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.9);
}
.dleft {
  flex: 0 0 20vw;
  width: 50px;
  text-align: center;
  order: -1; /* 让 #left 居于左侧 */
}
.dmid {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 10px;
  font-size: 4vw;
}
.dright {
  flex: 0 0 20vw;
  text-align: center;
}
.custom-button {
  width: auto;
  padding: 5px 10px;
  color: #fff;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  background-color: #0aadee;
  border-radius: 20px;
}
</style>
